<template>
  <!--表格-編輯-->
  <div class="edit-table">
    <div class="form-table">
      <div class="tr">
        <span class="th" v-for="(th,i) in curTitle" :key="i">{{th.fieldName}}<el-tooltip v-if="!$isEmpty(th.tips)" effect="dark" :content="th.tips" placement="top"><i class="fa fa-question-circle-o"></i></el-tooltip></span>
        <span class="th" style="width: 140px">操作</span>
      </div>
      <el-form class="tr" :class="{'active':liItem.active}"
               :model="liItem"
               :ref="'liItem'+index"
               v-for="(liItem,index) in curDatas"
               :key="'li'+index">

        <el-form-item class="td"
                      v-for="item in curTitle"
                      :key="item.fieldCode"
                      :label="!liItem.editFlag||!item.editable?'':' '"
                      :prop="item.fieldCode"
                      :rules="item.rules">
          <!--显示-->
          <form-item v-if="!liItem.editFlag||!item.editable" :item="handelCode(liItem,item)"></form-item>

          <!--编辑-->
          <select-input-edit v-else-if="item.editType==='selectInput'"
                             :item="item"
                             :curRules.sync="item.rules"></select-input-edit>
          <form-item-edit v-else :item="item" :curDatas.sync="liItem"></form-item-edit>
        </el-form-item>

        <!--操作-->
        <div class="td operation" v-if="liItem.editFlag">
          <button class="btn-theme" type="button" @click="saveList('liItem'+index,liItem)">保存</button>
          <button class="btn-theme-o" type="button" @click="cancelList(liItem,index)">取消</button>
        </div>
        <div class="td operation" v-else>
          <button class="btn-primary-t" type="button" @click="editList(liItem)">编辑</button>
          <button class="btn-theme-t" type="button" @click="deleteList(liItem)">删除</button>
        </div>

      </el-form>

      <!--add-->
      <el-form v-if="addFlag" class="tr add"
               :model="addList"
               ref="addList">
        <el-form-item class="td"
                      v-for="item in curTitle"
                      :key="item.fieldCode"
                      :id="item.fieldCode"
                      label=""
                      :prop="item.fieldCode"
                      :rules="item.rules">
          <select-input-edit v-if="item.editType==='selectInput'"
                             :item="item"
                             :curDatas.sync="addList"
                             :curRules.sync="item.rules"></select-input-edit>
          <form-item-edit v-else :item="item" :curDatas.sync="addList"></form-item-edit>
        </el-form-item>

        <div class="td operation">
          <button class="btn-theme" type="button" @click="saveList('addList',addList)">保存</button>
          <button class="btn-theme-o" type="button" @click="deleteAdd">取消</button>
        </div>
      </el-form>

    </div>
    <button class="form-add" v-if="!addFlag&&addBtnShow" type="button" @click="addFlag=true">+ 添加</button>

<!--
    curDatas:{{curDatas}}
    <hr>
    addList:{{addList}}
-->

  </div>
</template>

<script>
import FormItemEdit from "./FormItemEdit";
import SelectInputEdit from "./SelectInputEdit";
import FormItem from "./FormItem";
import { CurEdit, GetTableData } from "./mixins.js";

export default {
  name: "TableItemEdit",
  components: { FormItem, SelectInputEdit, FormItemEdit },
  mixins: [CurEdit, GetTableData]
};
</script>
